<template>
	<!-- 此组件为公用的顶部标题组件 -->
<view>
	<view class="header">
		<u-icon name="arrow-left" class="uicon" size="48" @click="back"></u-icon>
		<text>{{content}}</text>
	</view>
	<!-- 占位 -->
	<view class="view-slot" />
</view>
</template>

<script>
	export default {
		name: "commenHeader",
		props: {
			content: {
				type: String,
				default: ""
			}
		},
		data() {
			return {

			};
		},
		methods: {
			back() {
				let canNavBack = getCurrentPages()
				if (canNavBack?.length > 1) {
					uni.navigateBack()
				} else {
					history.back();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		justify-content: space-around;
        height: calc(88rpx + var(--status-bar-height));
		width: 100%;
		.uicon {
			left: 24rpx;
			position: absolute;
		}
		font-size: 34rpx;
		font-family: Helvetica;
		font-weight: bold;
	}
	.view-slot{
		height: calc(88rpx + var(--status-bar-height));
	}
</style>